<template>
  <div class="box">
      <h2 class="title">todos</h2>
      <div class="content">
          <!-- 使用HeaderCom组件 -->
          <HeaderCom @addTodo="addTodo" />
          <ul>
              <!-- 使用ToDoCom组件 -->
              <ToDoCom v-for="todo in todos" :key="todo.id" :todo="todo" @delTodo="delTodo" />
          </ul>
          <!-- 使用FooterCom组件 -->
          <FooterCom :todos="todos" @clearDone="clearDone" />

      </div>
  </div>
</template>

<script setup>
import HeaderCom from './components/HeaderCom.vue';
import FooterCom from './components/FooterCom.vue';
import ToDoCom from './components/ToDoCom.vue';
import { ref, watch, onMounted } from 'vue'
const todos = ref([
  // { id: 1, name: '写代码html', isDone: true },
  // { id: 2, name: '写代码js', isDone: false },
  // { id: 3, name: '写代码vue', isDone: true },
])

onMounted(() => {
  todos.value = JSON.parse(localStorage.getItem('todos') ? localStorage.getItem('todos') : '[]')
})

watch(todos, () => {
  console.log('watch');
  localStorage.setItem('todos', JSON.stringify(todos.value))
}, {
  deep: true
})


// 清除已完成
const clearDone = () => {
  todos.value = todos.value.filter(todo => !todo.isDone)
}

// 删除todo
const delTodo = (id) => {
  let index = todos.value.findIndex(todo => todo.id.toString() === id.toString())
  if (confirm('确认删除吗？')) {
      todos.value.splice(index, 1)
  }
}

// 添加todo
const addTodo = (todo) => {
  todos.value.unshift(todo)
}



</script>

<style lang="scss">
* {
  padding: 0;
  margin: 0;
}

.box {
  width: 300px;
  margin: 50px auto;

  .title {
      text-align: center;
  }
}

input[type=checkbox] {
  margin-right: 30px;
}
</style>